<template>
  <div>
    <nav-top/>
    
    <div class="container">
      <div class="title">个人中心</div>

      <div class="item-info">
        <div class="item-left">邮箱</div>
        <div class="item-content">{{userInfo.email}}</div>
        <div class="item-right">
          <el-button type="primary" plain disabled size="small">不可更改</el-button>
        </div>
      </div>

      <div class="item-info">
        <div class="item-left">用户名</div>
        <div class="item-content">{{userInfo.userName}}</div>
        <div class="item-right">
          <el-button type="primary" plain size="small" @click="showChangeName = true">更改</el-button>
        </div>
      </div>

      <div class="item-info">
        <div class="item-left">密码</div>
        <div class="item-content">*****</div>
        <div class="item-right">
          <el-button type="primary" plain size="small" @click="showChangePassWord = true">更改</el-button>
        </div>
      </div>

      <div class="item-info">
        <div class="item-left">头像</div>
        <div class="item-content">
          <avatar :size="45" :src="userInfo.userImage"/>
        </div>
        <div class="item-right">
          <el-button type="primary" plain size="small" :loading="imageLoading">{{imageLoadingStr}}</el-button>
          <input type="file" class="upload-file" @change="addImage($event)" accept=".jpg, .jpeg, .png, .gif"/>
        </div>
      </div>

      <!-- 修改用户名 -->
      <change-name :show="showChangeName" :userName="userInfo.userName" @close="showChangeName = false" @changeName="changeName"/>
      <!-- 修改密码 -->
      <change-password :show="showChangePassWord" :email="userInfo.email" @close="showChangePassWord = false"/>
    </div>
  </div>

</template>

<script>
import LocalStorage from "@/utils/localStorage.js"
import NavTop from "@/components/NavTop.vue"
import Avatar from '@/components/Avatar.vue'
import ChangeName from './components/ChangeName.vue'
import ChangePassword from './components/ChangePassword.vue'
import OssUtils from "@/utils/ossUtils.js"

export default {
  head () {
    return {
      title: `个人中心`,
      meta:[
        // 阻止搜索引擎编入索引
        { name:'robots',content: 'noindex'}
      ]
    }
  },

  components:{
    Avatar,
    NavTop,
    ChangeName,
    ChangePassword
  },

  data(){
    return{
      showChangeName: false,
      showChangePassWord: false,

      // 头像更换
      imageLoading: false,
      imageLoadingStr: "更改",

      userInfo:{
        userImage: "",
        userName:'',
        userId:""
      }
    }
  },

  mounted(){
    this.userInfo = LocalStorage.getItem("USER_INFO")
  },

  methods:{
    changeName(userName){
      this.userInfo.userName = userName
      LocalStorage.setItem("USER_INFO", this.userInfo)
    },

    addImage(event){
      if(event.target.files && event.target.files.length > 0){
        // 要上传的文件
        let imageFile = event.target.files[0]
        let key = "userImage/" + this.userInfo.userId + "/" + new Date().getTime() + imageFile.name
        OssUtils.upImage(this, key, imageFile, {
          error: res => { 
            this.imageLoading = false
            this.imageLoadingStr = "更换"
            this.$message.error(res);
          },
          
          success: _ => {
            this.imageLoading = false
            this.imageLoadingStr = "更换"

            this.userInfo.userImage = "https://img.huiyong.online/" + key
            LocalStorage.setItem("USER_INFO", this.userInfo)
          },
          
          progress: progress => {
            this.imageLoading = true
            this.imageLoadingStr = parseFloat(progress) * 100 + "%"
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
